<template>
  <div class="appp">
    <a-modal
      :title="title"
      width="99%"
      :visible="visible"
      :footer="null"
      @cancel="handleCancel"
      centered
    >
      <div class="warrper">
        <!-- <div>
          <to-head :title="title" :eqname="eqname" three="true" />
        </div> -->
        <div class="bnr-con">
          <a-row :gutter="16" class="up ">
            <a-col :span="5" style="height:100%">
              <div class="box-border">
                <p class="tit">设备利用率</p>
                <eq-runing :data="eqDetail" :bjindex="index"></eq-runing>
                <div class="name">
                  <p>
                    <span>设备名称：</span
                    ><span class="hwname">{{
                      eqDetail ? eqDetail.name : ''
                    }}</span>
                  </p>
                  <p>
                    <span>今日运行时长：</span
                    ><span class="hwname">{{
                      eqDetail ? eqDetail.yxsc : ''
                    }}</span>
                  </p>
                  <p>
                    <span>当前测试项目：</span
                    ><span class="hwname"
                      >{{ eqDetail ? eqDetail.csxm : '' }}
                    </span>
                  </p>
                  <p>
                    <span>周设备利用率：</span>
                    <span class="hwname">{{
                      eqDetail ? eqDetail.week_oee : ''
                    }}</span>
                  </p>
                  <p>
                    <span>月设备利用率：</span>
                    <span class="hwname">{{
                      eqDetail ? eqDetail.month_oee : ''
                    }}</span>
                  </p>
                </div>
              </div>
            </a-col>
            <a-col :span="14" style="height:100%">
              <calend ref="rili" :eqname="sname"></calend>
            </a-col>
            <a-col :span="5" style="height:100%"
              ><eq-info
                ref="eqinfo"
                :eqname="eqname"
                :description="description"
              ></eq-info
            ></a-col>
          </a-row>
          <a-row :gutter="16" class="down ">
            <a-col :span="5" style="height:100%">
              <div class="box-border">
                <p class="tit">设备运行状态</p>
                <eq-state :state="state"></eq-state>
              </div>
            </a-col>
            <a-col :span="14">
              <div class="table-bg">
                <table-list ref="table" :eqname="eqname"></table-list>
              </div>
            </a-col>
            <a-col :span="5" style="height:100%"><person></person></a-col>
          </a-row>
        </div>
      </div>
    </a-modal>
  </div>
</template>

<script>
// import ToHead from './components/bnr3/ToHead.vue'
import { sysQuery } from './api/dataApi'
import EqInfo from './components/eq/EqInfo.vue'
import TableList from './components/eq/TableList.vue'
import Calend from './components/eq/Calend.vue'
import Person from './components/eq/Person.vue'
import EqRuning from './components/eq/EqRuning.vue'
import EqState from './components/eq/EqState.vue'

export default {
  name: 'App',
  components: {
    // ToHead,
    EqInfo,
    TableList,
    Calend,
    Person,
    EqRuning,
    EqState,
  },
  data() {
    return {
      title: '博耐尔试验设备驾驶舱',
      eqList: [],
      bjData: [],
      pageIndex: 1,
      eqname: '',
      description: '',
      timeInterval: null,
      eqDetail: {},
      index: 0,
      visible: false,
      sname: '',
      state: '',
    }
  },

  watch: {
    eqname(val) {
      this.eqList.forEach((item) => {
        if (item.name == val) {
          item['isRuning'] = true
        } else {
          item['isRuning'] = false
        }
      })
    },
  },

  created() {
    this.getData()
  },
  mounted() {
    // this.timeInterval = setInterval(() => {
    //   this.eqDetail = this.eqList[this.index]
    //   this.eqname = this.eqList[this.index]['name']
    //   this.description = this.eqList[this.index]['description']
    //   this.index++
    //   if (this.index >= this.eqList.length) {
    //     this.index = 0
    //   }
    // }, 5000)
  },

  methods: {
    handleCancel() {
      this.visible = false
      this.eqname = ''
      this.eqDetail = null
      this.description = ''
      this.state = ''
      this.sname = ''
    },
    toOpen(item) {
      console.log('item', item)
      this.visible = true
      this.eqname = item.name
      this.eqDetail = item
      this.description = item.description
      this.sname = item.sname
      this.$nextTick(() => {
        this.$refs.rili.getData(item.sname)
        this.$refs.table.getData(item.sname)
        this.state = this.getState(item.state)
      })
    },
    getState(val) {
      let state = ''
      switch (val) {
        case '运行':
          state = '0.9'
          break
        case '待机':
          state = '0.7'
          break
        case '停机':
          state = '0.5'
          break
        case '维修':
          state = '0.3'
          break
        case '封存':
          state = '0.1'
          break
        default:
          ''
      }
      return state
    },
    getData() {
      const that = this
      const header = {}
      header['report.tableid'] = 'bne_chart_device'
      // header['report.tableid'] = 'main@d_device'
      const params = {
        _params: JSON.stringify(header),
        //    '@params': JSON.stringify(header),
        _conditions: {},
        // pageSize: 20,
        pageIndex: 1,
        sortField: '',
        sortOrder: '',
      }
      sysQuery(params)
        .then((res) => {
          that.eqList = res.data ? res.data : []
          that.eqname = res.data ? res.data[0].name : ''
        })
        .catch(() => {
          that.$message.error('数据请求失败，请联系管理员！')
        })
    },
    destroyed() {
      clearInterval(this.timeInterval)
      this.timeInterval = null
    },
  },
}
</script>

<style lang="less" scoped>
.appp {
  font-family: 'MicrosoftYaHei', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #fff;
  padding: 15px;
  box-sizing: border-box;
  /* margin-top: 60px; */
}
.bnr-con {
  height: 88vh;
  margin-left: 15px;
  margin-right: 15px;
  margin-top: 1vh;
}
.bnr-head {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  flex-wrap: nowrap;
  margin: 15px 15px;
  box-sizing: border-box;
  height: 10vh;
  .wx-head-con {
    flex: 1;
    border-radius: 4px;
    height: 100%;
    padding: 15px;
    margin-right: 15px;
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;

    .left {
      width: 100px;
      font-size: 38px;
    }
    .right {
      flex: 1;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      flex-direction: column;
      flex-wrap: nowrap;
      .num {
        font-size: 24px;
        margin-bottom: 1px;
        letter-spacing: 1px;
      }
      .title {
        font-size: 14px;
        color: #ccc;
      }
    }
  }
}

.left {
  padding: 0px 15px;
  .px2vh(line-height, 48);
  text-align: left;
  .px2font(13);
  .anticon {
    .px2font(20);
    vertical-align: middle;
  }
}
.tit {
  .px2font(17);
  .px2vh(padding-top, 8);
  .px2vw(padding-left, 15);
  .px2vh(padding-bottom, 8);

  letter-spacing: 2px;
  color: #fff;
  text-align: left;
  background: linear-gradient(
    to right,
    rgba(21, 60, 160, 0.1),
    rgba(21, 60, 160, 0.3) 50%,
    rgba(21, 60, 160, 0.1)
  );
  // background: -webkit-linear-gradient(
  //   left,
  //   rgba(26, 211, 233, 0.15),
  //   rgba(21, 60, 160, 0.15)
  // );

  // background: rgba(21, 60, 160, 0.1);
}
.runing {
  font-weight: bold;
  // background: rgba(51, 204, 255, 0.6);
  border: 1px solid #07d7ca;
  // box-shadow: inset 0px 0px 20px 0px rgba(2, 187, 124, 0.5);
  // box-shadow: inset 0px 0px 20px 0px rgba(51, 204, 255, 0.5);
  box-shadow: inset 0px 0px 20px 0px rgba(39, 255, 242, 0.5);
  .anticon {
    color: #27fff2 !important;
  }
  span {
    color: #27fff2 !important;
  }
}
.up {
  height: 50vh;
}
.down {
  height: 35vh;
  box-sizing: border-box;
  margin-top: 2vh;
}
.table-bg {
  background: url('./assets/images/bk2.png');
  background-size: 100% 100%;
  height: 35vh;
}
.name {
  .px2vw(width, 330);
  margin: 0 auto;
  .px2vw(padding-left, 15);
  .px2vw(padding-right, 15);

  p {
    .px2vh(line-height, 32);
  }
  span {
    color: #ddd;
    .px2font(15);
  }
  .hwname {
    color: #67e0e3;
    .px2font(17);
    letter-spacing: 1px;
    text-overflow: ellipsis;
    overflow: hidden;
  }
}
.bjname {
  color: #1ed3e5;
  font-size: 1.5rem;
}
.eqname {
  position: absolute;
  right: 5%;
  top: 5%;
  color: #1ed3e5;
}

.warrper ::v-deep .ant-select-selection {
  border: 1px solid #122794;
}
.warrper ::v-deep .ant-fullcalendar-header {
  padding: 2px 16px 0px 0;
}
</style>
